<!-- 看看 -->
<template>
    <div class='look'>
        <van-panel title="联系物业">
            <ul class="property border-bottom" v-if="propertyCompany">
                <li>{{propertyCompany.prop_name}}</li>
                <li>地址:{{propertyCompany.prop_addr}}</li>
                <li>电话:{{propertyCompany.prop_call}}</li>
                <li>联系人:{{propertyCompany.prop_contact}}</li>
                <li>手机:{{propertyCompany.prop_phone}}</li>
            </ul>
            <p class="empty" v-else>暂无绑定小区</p>
        </van-panel>
        <van-panel title="小知识">
            <ul class="tips" v-if="tips">
                <li v-for="(item,index) in tips" :key="index">
                    <div @click="godetails(index)">
                        <van-image class="border" width="2rem" height="2rem" fit="contain" :src="item.image" />
                        <h6>{{item.title}}</h6>
                        <p>{{item.content}}</p>
                    </div>
                </li>
            </ul>
            <p class="empty" v-else>暂无消息</p>
        </van-panel>
    </div>
</template>

<script>
    //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
    //例如：import 《组件名称》 from '《组件路径》';

    export default {
        name: 'Look',
        //import引入的组件需要注入到对象中才能使用
        components: {},
        data() {
            //这里存放数据
            return {
                propertyCompany: null,
                tips: [
                    {
                        image: require('../assets/img/img2/v2_pz8mwu.jpg'),
                        title: '防盗小知识',
                        content: '门窗加固对预防盗窃很重要。要选择质量好、安全系数高的防盗门窗，避免“防盗门窗不防盗”的现象发生，给不法分子提供...'
                    },
                    {
                        image: require('../assets/img/img2/v2_pz8n5y.png'),
                        title: '防火小知识',
                        content: '发现起火立即报警，这是每一个公民应尽的义务和应有的消防意识。首先就是要向...'
                    },
                    {
                        image: require('../assets/img/img2/v2_pz8nbs.jpg'),
                        title: '物业小知识',
                        content: '物业公司何时开始收取物业管理费？答：一般可以分成两种情况和方式，一是，从购房人收房签字后，开始收取物业管理...'
                    },
                    {
                        image: require('../assets/img/img2/v2_pz8n7q.png'),
                        title: '生活小知识',
                        content: '在我们的生活当中，也是利用很多的小妙招来做得更完美，看看你知道哪些。你知道怎样减缓有幸皮肤吗？你知道土豆还有很多...'
                    }

                ]
            };
        },
        //监听属性 类似于data概念
        computed: {
            userid() {
                return this.$store.state.userid
            },
            // token(){
            //     return this.$store.state.token
            // }
        },
        //监控data中的数据变化
        watch: {},
        //方法集合
        methods: {
            getPropertyCompany() {
                this.$axios.get('/comm/getcmminfo', {
                    //headers:{token:this.token},
                    params: { user_id: this.userid }
                }).then((res) => {
                    //console.log(res);
                    let { message, data, status } = res;
                    if (status == 200) {
                        this.propertyCompany = data;
                    }
                })
            },
            godetails(index){
                // console.log(index)
                this.$router.push({
                        name:"details",
                        params: {
                            sign:index+1
                                }
                    })
            }
        },
        //生命周期 - 创建完成（可以访问当前this实例）
        created() {
            this.getPropertyCompany();
        },
        //生命周期 - 挂载完成（可以访问DOM元素）
        mounted() {

        },
        beforeCreate() { }, //生命周期 - 创建之前
        beforeMount() { }, //生命周期 - 挂载之前
        beforeUpdate() { }, //生命周期 - 更新之前
        updated() { }, //生命周期 - 更新之后
        beforeDestroy() { }, //生命周期 - 销毁之前
        destroyed() { }, //生命周期 - 销毁完成
        activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
    }
</script>
<style lang='scss' scoped>
    //@import url(); 引入公共css类
    @import url(../assets/css/border-1px.css);

    .look {
        padding-bottom: 50px;

        .van-panel {
            .empty {
                padding: 0 0.2rem 0.3rem;
                text-align: center;
                font-size: 0.32rem;
            }

            .van-cell {
                font-size: 0.4rem;
                font-weight: bold;
                //border-bottom:1px solid #bbb;
            }
        }

        .property {
            padding: 0.2rem;
            border-color: #bbb;

            li {
                line-height: 0.6rem;
            }
        }

        .tips {
            li {
                padding: 0rem 0.1rem 0rem 2.4rem;
                min-height: 2rem;
                position: relative;
                overflow: hidden;

                .van-image {
                    display: block;
                    position: absolute;
                    left: 0.1rem;
                    top: 50%;
                    margin-top: -1rem;
                    border-color: #bbb;
                }

                h6 {
                    font-size: 0.4rem;
                    color: #101010;
                    padding: 0.2rem 0;
                }

                p {
                    font-size: 0.3rem;
                    color: #101010;
                    word-wrap: break-word;
                    line-height: 0.44rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                }
            }
        }
    }
</style>